<template>
	<div class="main-box">
		<TreeFilter
			:requestApi="getUserDepartment"
			@change="changeInitParam"
			:data-callback="dataCallback"
			:default-value="defaultValue"
			title="部门列表"
			label="name"
		/>
		<div class="table-box">
			<CTable
				ref="cTableRef"
				:columnList="columnList"
				:apiSearch="getUserList"
				indexEnable
				selectionEnable
				:apiBatchDelete="getUserList"
				:apiDelete="getUserList"
				:addHandler="addEditRef?.openAdd"
				:editHandler="addEditRef?.openEditDataInit"
				:detailHandler="detailDrawerRef?.openDataInit"
				operationColWidth="160px"
				:initParam="initParam"
				:initQueryEnable="false"
				searchTriggerMode="changeEvent"
				addEnable
			>
			</CTable>
			<!-- 添加、编辑，如果内容不同，可创建两个，一个添加一个编辑 -->
			<CAddEditDrawer
				ref="addEditRef"
				:size="500"
				:itemList="formItemList"
				:apiAdd="apiAdd"
				:apiEdit="apiEdit"
				@add-success="cTableRef?.initPageNoSearch()"
				@edit-success="cTableRef?.search()"
			></CAddEditDrawer>
			<!-- 详情 -->
			<CDetailDrawer ref="detailDrawerRef" :groupList="detailItemList" :size="1000">
				<template #test1>
					<el-tabs v-model="activeName" class="demo-tabs">
						<el-tab-pane label="User" name="first">
							<el-table :data="tableData" style="width: 100%">
								<el-table-column prop="date" label="Date" width="180" />
								<el-table-column prop="name" label="Name" width="180" />
								<el-table-column prop="address" label="Address" />
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="Config" name="second">Config</el-tab-pane>
						<el-tab-pane label="Role" name="third">Role</el-tab-pane>
						<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
					</el-tabs>
				</template>
			</CDetailDrawer>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ColumnProps } from '@/components/CTable/interface'
import { FormItemProps } from '@/components/CForm/interface'
import CTable from '@/components/CTable/index.vue'
import TreeFilter from '@/components/TreeFilter/index.vue'
import CAddEditDrawer from '@/components/CAddEditDrawer/index.vue'
import CDetailDrawer from '@/components/CDetailDrawer/index.vue'
import { DetailGroupProps } from '@/components/CDetailDrawer/interface/index'
import { getUserList, getUserDepartment } from '@/api/modules/user'
import { ElMessage } from 'element-plus'
const cTableRef = ref<InstanceType<typeof CTable>>()
const addEditRef = ref<InstanceType<typeof CAddEditDrawer>>()
const detailDrawerRef = ref<InstanceType<typeof CDetailDrawer>>()

// 表格初始参数
const initParam = reactive({
	departmentId: ''
})
/**
 * 树
 */
//  树的默认选中值
const defaultValue = ref('')
// 树形筛选切换
const changeInitParam = (val: string) => {
	ElMessage.success('请注意查看请求参数变化 🤔')
	initParam.departmentId = val
}
// 树数据请求回调
const dataCallback = (data: Array<any>) => {
	if (data.length) {
		defaultValue.value = data[0].id
		changeInitParam(data[0].id)
	}
}
/**
 * 表格
 */
const columnList: ColumnProps[] = [
	{ prop: 'username', label: '用户姓名', width: 130, searchEnable: true },
	{
		prop: 'gender',
		label: '性别',
		width: 120,
		searchEnable: true,
		searchType: 'select',
		colType: 'tag',
		dict: 'gender_type'
	},
	{ prop: 'idCard', label: '身份证号', searchEnable: true },
	{ prop: 'email', label: '邮箱', searchEnable: true },
	{ prop: 'address', label: '居住地址', searchEnable: true },
	{
		prop: 'status',
		label: '用户状态',
		search: true,
		searchType: 'select',
		colType: 'tag',
		dict: 'user_status'
	},
	{
		prop: 'createTime',
		label: '创建时间',
		width: 200,
		searchEnable: true,
		searchType: 'datetimerange',
		searchProps: {
			// disabledDate: (time: Date) => time.getTime() < Date.now() - 8.64e7
		},
		// 默认值，刷新后还是存在
		searchDefault: ['2022-09-20 00:00:00', '2022-09-30 23:59:59']
	}
]

/**
 * 添加、修改
 */
const formItemList: FormItemProps[] = [
	{
		prop: 'id',
		label: 'id'
	},
	{
		prop: 'username',
		rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
		label: '用户姓名'
	},
	{
		prop: 'gender',
		label: '性别',
		compType: 'select',
		dict: 'gender_type'
	},
	{ prop: 'idCard', label: '身份证号' },
	{ prop: 'email', label: '邮箱' },
	{ prop: 'address', label: '居住地址' },
	{
		prop: 'user',
		label: '用户',
		compType: 'object',
		itemInfo: [
			{
				prop: 'name',
				rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
				label: '用户名'
			}
		]
	},
	{
		prop: 'status',
		label: '用户状态',
		compType: 'select',
		compDefault: 1,
		dict: 'user_status'
	},
	{
		prop: 'createTime',
		isShow: ({ formData }) => {
			// 显示逻辑定义
			return formData.status === 1
		},
		label: '创建时间',
		compType: 'datetime',
		compProps: {
			// compType 组件配置
			// disabledDate: (time: Date) => time.getTime() < Date.now() - 8.64e7
		},
		// compDefault: '2022-09-30 23:59:59',
		rules: [{ required: true, message: '不能为空' }]
	}
]

/**
 * 详情
 */
const detailItemList: DetailGroupProps[] = [
	{
		title: 'test',
		slotName: 'test',
		metadata: [
			{
				prop: 'id',
				label: 'id',
				span: 12
			},
			{
				prop: 'username',
				label: '用户姓名',
				span: 12
			},
			{
				prop: 'gender',
				label: '性别',
				compType: 'tag',
				dict: 'gender_type',
				span: 12
			},
			{ prop: 'idCard', label: '身份证号', span: 12 },
			{ prop: 'email', label: '邮箱', span: 12 },
			{ prop: 'address', label: '居住地址', span: 12 },
			{
				prop: 'status',
				label: '用户状态',
				compType: 'tag',
				compDefault: 1,
				dict: 'user_status',
				span: 12
			},
			{
				prop: 'createTime',
				label: '创建时间',
				span: 12,
				isShow({ data }) {
					return data.status === 1
				}
			}
		]
	},
	{
		// title: 'test',
		slotName: 'test1',
		metadata: []
	}
]
// 新增
function apiAdd() {
	console.log('apiAdd')
	return Promise.resolve()
}
// 编辑
function apiEdit() {
	console.log('apiEdit')
	return Promise.resolve()
}
const activeName = ref('first')
const tableData = [
	{
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	},
	{
		date: '2016-05-02',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	},
	{
		date: '2016-05-04',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	},
	{
		date: '2016-05-01',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	}
]
</script>
